<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--    <link href="../../L-css/L-findMusic.css" rel="stylesheet"/>-->
    <link th:href="@{/static/L-css/L-findMusic.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/L-img/font_2533053_iojhpwhxp0b/iconfont.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/L-img/font_2550907_osj83i90mhl/iconfont.css}" href="../../L-img/font_2550907_osj83i90mhl/iconfont.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon"  th:href="@{/static/L-img/L-image/L-logo.png}">
    <title>发现音乐</title>
</head>
<body>


<div id="all">
    <!-- 头部 -->
    <div class="header">
        <div class="kMusic">
            <img th:src="@{/static/L-img/L-image/future1.jpg}" src="../../L-img/L-image/future1.jpg" />
        </div>
        <ul class="manya">
            <li><a th:href="@{/}">发现音乐</a></li>
            <li><a class="vipBtn">VIP会员</a></li>
            <li><a class="myMusic">我的音乐</a></li>
        </ul>
        <!-- 搜索和登录注册 -->
        <div class="right">
            <div class="headCenter">
                <div class="headCenterSearch">
                    <form th:action="@{/music/queryByNameMusic}" method="get" class="seekForm" id="seekGoodsForm">
                        <input id="goSearch" autocomplete="off" type="text" name="queryMusicName" placeholder="搜索歌手/歌单/MV/歌词" />
                        <input type="submit" id="actSearch" value="搜索"/>
                    </form>
                </div>
            </div>
            <div class="login">
                <a th:href="@{/loginpage}">登录</a>
            </div>
            <div class="persons" >
                <span>欢迎</span>
                <block th:if="${session.USER}!=null">
                    <span class="userName" th:text="${session.USER.userName}">用户名</span>
                </block>

                <span class="out">退出登录</span>
            </div>
        </div>
    </div>

<!--    退出登录的代码-->
    <div class="hideLogOut">
        <div class="hideLogOutContent">
            <h2 class="chooseLogOut">是否退出登录</h2>
            <div class="logOutBtn" >
                <button class="logOutNoBtn">取 消</button>
                <button class="logOutYesBtn" th:href="@{/out}">确 认</button>
            </div>
        </div>
    </div>
</div>
    <!-- 中间主体部分 -->
    <div class="subject">
        <div class="recomment">
            <ul>
                <li class="refer1"><a th:href="@{/}">推荐</a></li>
                <li><a th:href="@{/music/queryAllSinger}">歌手</a></li>
                <li><a th:href="@{/music/allMusic}">歌单</a></li>
                <li><a th:href="@{/toMvpaper}">MV</a></li>
            </ul>
        </div>
        <div class="wrap">
            <ul class="list">
                <li class="item active"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
            </ul>
            <ul class="pointList">
                <li class="point active" data-index='0'></li>
                <li class="point" data-index='1'></li>
                <li class="point" data-index='2'></li>
                <li class="point" data-index='3'></li>
                <li class="point" data-index='4'></li>
            </ul>
            <button type="button" class="btn" id="goPre"><</button>
            <button type="button" class="btn" id="goNext">></button>
        </div>
        <div class="songList">

            <ul class="playList">
                <li class="referList">推荐专辑</li>
                <li class="refer active" data-index='0'>每日推荐</li>
                <li class="refer" data='1'>HOP</li>
                <li class="refer" data='2'>流行</li>
                <li class="refer" data='3'>民谣</li>
                <li class="refer" data='4'>影视原声</li>
                <li class="refer" data='5'>摇滚</li>
            </ul>
        </div>
<!--        每日推荐-->
        <div class="mv active day-n" >
            <ul class="newList">
                <li th:each="type,loopStatus:${Album1}">

                        <a th:href="@{/music/queryOneAlb(albId=${type.albId})}">
                            <div class="bigImg">
                                <img th:src="@{/static/L-img/L-image/L-day1.jpg}"/>
                                <div class="mask">
                                    <i class="iconfont icon-kaishi"></i>
                                </div>
                            </div>
                            <p th:text="${type.albName}">每日最新歌单推荐</p>
                        </a>
                        <span>点击量:<span th:text="${type.albHot}">20000万</span></span>
                </li>
            </ul>
        </div>
<!--        HOP-->
        <div class="mv mv-h" >
            <ul class="newList">
                <li th:each="type,loopStatus:${Album2}">
                    <div class="bigImg">
                        <!--                        <img th:src="@{type.img}"/>-->
                        <img th:src="@{/static/L-img/L-image/L-day1.jpg}" src="../../L-img/L-image/L-day1.jpg"/>
                        <div class="mask">
                            <i class="iconfont icon-kaishi"></i>
                        </div>
                    </div>
                    <a th:href="@{/music/queryOneAlb(albId=${type.albId})}"><p th:text="${type.albName}">每日最新歌单推荐</p></a>
                    <span>点击量:<span th:text="${type.albHot}">20000万</span></span>
                </li>
            </ul>
        </div>
<!--    流行-->
        <div class="mv mv-l">
            <ul class="newList">
                <li th:each="type,loopStatus:${Album3}">
                    <div class="bigImg">
                        <!--                        <img th:src="@{type.img}"/>-->
                        <img th:src="@{/static/L-img/L-image/L-day1.jpg}" src="../../L-img/L-image/L-day1.jpg"/>
                        <div class="mask">
                            <i class="iconfont icon-kaishi"></i>
                        </div>
                    </div>
                    <a th:href="@{/music/queryOneAlb(albId=${type.albId})}"><p th:text="${type.albName}">每日最新歌单推荐</p></a>
                    <span>点击量:<span th:text="${type.albHot}">20000万</span></span>
                </li>
            </ul>
        </div>
<!--        民谣-->
        <div class="mv mv-m">
            <ul class="newList">
                <li th:each="type,loopStatus:${Album4}">
                    <div class="bigImg">
                        <!--                        <img th:src="@{type.img}"/>-->
                        <img th:src="@{/static/L-img/L-image/L-day1.jpg}" src="../../L-img/L-image/L-day1.jpg"/>
                        <div class="mask">
                            <i class="iconfont icon-kaishi"></i>
                        </div>
                    </div>
                    <a th:href="@{/music/queryOneAlb(albId=${type.albId})}"><p th:text="${type.albName}">每日最新歌单推荐</p></a>
                    <span>点击量:<span th:text="${type.albHot}">20000万</span></span>
                </li>
            </ul>
        </div>
<!--        影视原声-->
        <div class="mv mv-y">
            <ul class="newList">
                <li th:each="type,loopStatus:${Album5}">
                    <div class="bigImg">
                        <!--                        <img th:src="@{type.img}"/>-->
                        <img th:src="@{/static/L-img/L-image/L-day1.jpg}" src="../../L-img/L-image/L-day1.jpg"/>
                        <div class="mask">
                            <i class="iconfont icon-kaishi"></i>
                        </div>
                    </div>
                    <a th:href="@{/music/queryOneAlb(albId=${type.albId})}"><p th:text="${type.albName}">每日最新歌单推荐</p></a>
                    <span>点击量:<span th:text="${type.albHot}">20000万</span></span>
                </li>
            </ul>
        </div>
<!--        摇滚-->
        <div class="mv mv-f">
            <ul class="newList">
                <li th:each="type,loopStatus:${Album6}">
                    <div class="bigImg">
                        <!--                        <img th:src="@{type.img}"/>-->
                        <img th:src="@{/static/L-img/L-image/L-day1.jpg}" src="../../L-img/L-image/L-day1.jpg"/>
                        <div class="mask">
                            <i class="iconfont icon-kaishi"></i>
                        </div>
                    </div>
                    <a th:href="@{/music/queryOneAlb(albId=${type.albId})}"><p th:text="${type.albName}">每日最新歌单推荐</p></a>
                    <span>点击量:<span th:text="${type.albHot}">20000万</span></span>
                </li>
            </ul>
        </div>
        <div class="activity">排行榜</div>
        <div class="hotSong">
            <div class="hotList">
                <div class="bang">
                    <div class="bang-top">
                        <div class="top-img">
                            <img th:src="@{/static/L-img/L-image/bang1.png}" src="../../L-img/L-image/bang1.png"/>
                        </div>
                        <img class="singHot" th:src="@{/static/L-img/L-image/hot1.jpg}" src="../../L-img/L-image/hot1.jpg"/>
                    </div>
                    <ul class="list-con">
                        <li class="list-data" th:each="name,loopStatus:${Musics1}">
                            <div class="order" th:text="${loopStatus.count}"></div>
                            <div class="mess">
<!--                                <p class="song-name" th:text="${name.mcName}">大风吹</p>-->
                                <a th:href="@{/music/queryByIdAlbmusic(mcId=${name.mcId})}"><p class="song-name" th:text="${name.mcName}">大风吹</p></a>
                                <p class="artist" th:text="${name.userName}">王赫野</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="bang">
                    <div class="bang-top">
                        <div class="top-img">
                            <img th:src="@{/static/L-img/L-image/bang2.png}" src="../../L-img/L-image/bang2.png"/>
                        </div>
                        <img class="singHot" th:src="@{/static/L-img/L-image/hot2.jpg}" src="../../L-img/L-image/hot2.jpg"/>
                    </div>
                    <ul class="list-con">
                        <li class="list-data" th:each="name,loopStatus:${Musics2}">
                            <div class="order" th:text="${loopStatus.count}"></div>
                            <div class="mess">
                                <a th:href="@{/music/queryByIdAlbmusic(mcId=${name.mcId})}"><p class="song-name" th:text="${name.mcName}">大风吹</p></a>
                                <p class="artist" th:text="${name.userName}">王赫野</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="bang">
                    <div class="bang-top">
                        <div class="top-img">
                            <img th:src="@{/static/L-img/L-image/bang3.png}" src="../../L-img/L-image/bang3.png"/>
                        </div>
                        <img class="singHot" th:src="@{/static/L-img/L-image/hot3.jpg}" src="../../L-img/L-image/hot3.jpg"/>
                    </div>
                    <ul class="list-con">
                        <li class="list-data" th:each="name,loopStatus:${Musics3}">
                            <div class="order" th:text="${loopStatus.count}"></div>
                            <div class="mess">
                                <a th:href="@{/music/queryByIdAlbmusic(mcId=${name.mcId})}"><p class="song-name" th:text="${name.mcName}">大风吹</p></a>
                                <p class="artist" th:text="${name.userName}">王赫野</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="bang">
                    <div class="bang-top">
                        <div class="top-img">
                            <img th:src="@{/static/L-img/L-image/bang4.png}" src="../../L-img/L-image/bang4.png"/>
                        </div>
                        <img class="singHot" th:src="@{/static/L-img/L-image/hot4.jpg}" src="../../L-img/L-image/hot4.jpg"/>
                    </div>
                    <ul class="list-con">
                        <li class="list-data" th:each="name,loopStatus:${Musics4}">
                            <div class="order" th:text="${loopStatus.count}"></div>
                            <div class="mess">
                                <a th:href="@{/music/queryByIdAlbmusic(mcId=${name.mcId})}"><p class="song-name" th:text="${name.mcName}">大风吹</p></a>
                                <p class="artist" th:text="${name.userName}">王赫野</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="bang">
                    <div class="bang-top">
                        <div class="top-img">
                            <img th:src="@{/static/L-img/L-image/bang5.png}"  src="../../L-img/L-image/bang5.png"/>
                        </div>
                        <img class="singHot" th:src="@{/static/L-img/L-image/hot5.jpg}" src="../../L-img/L-image/hot5.jpg"/>
                    </div>
                    <ul class="list-con">
                        <li class="list-data" th:each="name,loopStatus:${Musics5}">
                            <div class="order" th:text="${loopStatus.count}"></div>
                            <div class="mess">
                                <a th:href="@{/music/queryByIdAlbmusic(mcId=${name.mcId})}"><p class="song-name" th:text="${name.mcName}">大风吹</p></a>
                                <p class="artist" th:text="${name.userName}">王赫野</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="language">
            <ul class="singerList">
                <li class="singList">歌手推荐</li>
                <li>
                    <a th:href="@{/music/queryAllSinger}">
                        更多
                        <img th:src="@{/static/L-img/L-image/L-right.png}" src="../../L-img/L-image/L-right.png"/>
                    </a>
                </li>
            </ul>
        </div>
        <div class="singers">
            <div class="firstSings" >
                <ul class="jay">
                    <li th:each="c : ${Singer}">
                        <a th:href="@{/music/queryall(userId=${c.userId})}">
                            <img th:src="${c.userImgload}" />
                            <div class="nameMask">
                                <p th:text="${c.userName}"></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="anchor">主播电台</div>
        <div class="station">
            <div class="radios">
                <div class="pic-out">
                    <div class="pic-in">
                        <div class="cover">
                            <img class="pic" th:src="@{/static/L-img/L-image/L-OIP.jpg}" />
                        </div>
                    </div>
                </div>
                <div class="right-info">
                    <p class="mv-name">
                        <span>一粒阳光音乐台</span>
                    </p>
                    <p class="mv-num">
                        <span>一粒阳光音乐台</span>
                    </p>
                </div>
            </div>

            <div class="radios">
                <div class="pic-out">
                    <div class="pic-in">
                        <div class="cover">
                            <img class="pic" th:src="@{/static/L-img/L-image/L-OIP.jpg}" />
                        </div>
                    </div>
                </div>
                <div class="right-info">
                    <p class="mv-name">
                        <span>一粒阳光音乐台</span>
                    </p>
                    <p class="mv-num">
                        <span>一粒阳光音乐台</span>
                    </p>
                </div>
            </div>

            <div class="radios">
                <div class="pic-out">
                    <div class="pic-in">
                        <div class="cover">
                            <img class="pic" th:src="@{/static/L-img/L-image/L-OIP.jpg}" />
                        </div>
                    </div>
                </div>
                <div class="right-info">
                    <p class="mv-name">
                        <span>一粒阳光音乐台</span>
                    </p>
                    <p class="mv-num">
                        <span>一粒阳光音乐台</span>
                    </p>
                </div>
            </div>

            <div class="radios">
                <div class="pic-out">
                    <div class="pic-in">
                        <div class="cover">
                            <img class="pic" th:src="@{/static/L-img/L-image/L-OIP.jpg}" />
                        </div>
                    </div>
                </div>
                <div class="right-info">
                    <p class="mv-name">
                        <span>一粒阳光音乐台</span>
                    </p>
                    <p class="mv-num">
                        <span>一粒阳光音乐台</span>
                    </p>
                </div>
            </div>

            <div class="radios">
                <div class="pic-out">
                    <div class="pic-in">
                        <div class="cover">
                            <img class="pic" th:src="@{/static/L-img/L-image/L-OIP.jpg}" />
                        </div>
                    </div>
                </div>
                <div class="right-info">
                    <p class="mv-name">
                        <span>一粒阳光音乐台</span>
                    </p>
                    <p class="mv-num">
                        <span>一粒阳光音乐台</span>
                    </p>
                </div>
            </div>

            <div class="radios">
                <div class="pic-out">
                    <div class="pic-in">
                        <div class="cover">
                            <img class="pic" th:src="@{/static/L-img/L-image/L-OIP.jpg}" />
                        </div>
                    </div>
                </div>
                <div class="right-info">
                    <p class="mv-name">
                        <span>一粒阳光音乐台</span>
                    </p>
                    <p class="mv-num">
                        <span>一粒阳光音乐台</span>
                    </p>
                </div>
            </div>


            <div class="radios">
                <div class="pic-out">
                    <div class="pic-in">
                        <div class="cover">
                            <img class="pic" th:src="@{/static/L-img/L-image/L-OIP.jpg}" />
                        </div>
                    </div>
                </div>
                <div class="right-info">
                    <p class="mv-name">
                        <span>一粒阳光音乐台</span>
                    </p>
                    <p class="mv-num">
                        <span>一粒阳光音乐台</span>
                    </p>
                </div>
            </div>


            <div class="radios">
                <div class="pic-out">
                    <div class="pic-in">
                        <div class="cover">
                            <img class="pic" th:src="@{/static/L-img/L-image/L-OIP.jpg}" />
                        </div>
                    </div>
                </div>
                <div class="right-info">
                    <p class="mv-name">
                        <span>一粒阳光音乐台</span>
                    </p>
                    <p class="mv-num">
                        <span>一粒阳光音乐台</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- 下边的小黑窗 -->
    <div class="black">
        <ul class="logo">
            <li><a href="javascript:;">用户服务协议</a></li>
            <li>隐私政策</li>
            <li>权利声明</li>
            <li>联系我们</li>
            <li>广告服务</li>
        </ul>
    </div>
    <div class="foot">
        <p>抛开忙碌，远离喧嚣，进入这里，你会发现生活是多么的缤纷多彩 欢迎加入我们</p>
        <p>Copyright © 2001 - 2021 Tencent. All Rights Reserved.</p>
        <p>未来公司 版权所有 QQ:911662779</p>
    </div>
</div>
<!--    </div>-->
<!-- 侧边栏 -->
<ul class="side">
    <li class="items feed">反馈</li>
    <li class="items up" onclick="toTop()">
        <a href="javascript:;">
            <img th:src="@{static/L-img/L-image/L-up.png}" src="../../L-img/L-image/L-up.png"/>
        </a>
    </li>
</ul>
<!--没有登录会弹出一个提示的弹窗-->
<div class="hideVipLoad">
    <div class="hideVipLoadForm">
        <div class="hideVipTop">
            <h5>提示</h5>
            <button class="closeVip"><span>x</span></button>
        </div>
        <div class="popub">
            <div class="popub-inner">
                <div class="popub-img">
                    <img th:src="@{/static/L-img/L-image/point.png}"/>
                </div>
                <p class="popub-desc">你还没有登录，请先登录!</p>
            </div>
        </div>
        <div class="hideFormBottom">
            <button class="loadBtn">登录</button>
        </div>
    </div>
</div>
<!--反馈的弹窗-->
<div class="hideBack">
    <div class="hideBackForm">
        <div class="hideFeed">
            <h4>意见反馈</h4>
            <button class="closeBack"><span>x</span></button>
        </div>
        <div class="popub">
            <div class="label">反馈内容:</div>
            <input class="feedback" autocomplete="off"  type="text" value="请输入反馈内容，我们会尽快安排解决">
        </div>
        <div class="popub">
            <div class="label">联系方式:</div>
            <input class="couple" autocomplete="off" type="text" value="请输入电话、QQ或邮箱,仅工作人员可见">
        </div>
        <div class="hideFormBottom">
            <input class="submit" type="submit" value="提交"/>
        </div>
    </div>
</div>
<!--反馈的弹窗 end-->
</body>
<script th:src="@{/static/L-js/L-findMusic.js}" rel="script" type="text/javascript">
</script>
</html>